<template>
  <div id="app">
    <div class="login" v-loading.fullscreen.lock="$store.state.loadingFlag"   element-loading-text="登录中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)">
      <div class="login_img">
        <img src="../assets/image/logo.png" alt class="img1" />
        <!-- <img src="../assets/image/return_on.png" alt class="img2" /> -->
      </div>
      <div class="login_center">
        <div class="login_center_right">
          <el-input
            v-model="UserName"
            class="username"
            type="text"
            placeholder="请输入账号"
            @keyup.enter.native="submitLogin"
          ></el-input>
          <el-input
            v-model="password"
            class="password"
            type="password"
            placeholder="请输入密码"
            @keyup.enter.native="submitLogin"
          ></el-input>
          <div class="login_center_right_pass">
            <el-checkbox class="unforgetNumber" v-model="checked">
              记住密码</el-checkbox>
          </div>
          <div
            class="login_center_right_bottom"
            @click.prevent="submitLogin"
            @keyup.enter.native="submitLogin"
          >
            登&nbsp;&nbsp;&nbsp;&nbsp;录
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { baseServe } from "../request/api";

export default {
  name: "Login",
  data() {
    return {
      checked: true,
      UserName: "",
      password: "",
    };
  },
  watch: {

  },
  mounted() {
    this.getCookie();


  },
  methods: {
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    getCookie() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; ");
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] == "userName") {
            this.UserName = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "userPwd") {
            this.password = arr2[1];
          }
        }
      }
    },
    clearCookie: function() {
      this.setCookie("", "", -1);
    },
    submitLogin() {

      let _this = this;
      let temp = null;
      let params = { account: this.UserName, password: this.password };
      if (this.UserName && this.password) {
        this.$store.state.loadingFlag=true
        baseServe
          .loginIn(params)
          .then(res => {
            setTimeout(()=>{
              this.$store.state.loadingFlag=false
              if (res.data.result.resultCode == "000000") {
                localStorage.setItem("creater", _this.UserName);
                localStorage.setItem("serverName", "zf-server");
                localStorage.setItem("rfdwnm", res.data.user.rfdwnm);
                localStorage.setItem("rfdwmc",res.data.user.rfdwmc);
                localStorage.setItem("userID",res.data.user.userID);
                localStorage.setItem('isNopower',false)
                let roles = res.data.user.roles;
                localStorage.setItem("roles", roles);
                localStorage.setItem("token", res.data.user.token);
                if(roles.length<1){
                  _this.$message({
                    message: "该用户没有相关权限",
                    type: "warning"
                  });
                  return
                }
                if(JSON.parse(localStorage.getItem('baseJson')).rfdwnm==localStorage.getItem('rfdwnm')){
                  this.$store.state.isNopower=true
                  localStorage.setItem('isNopower',true)
                }
                _this.$message({
                  message: "登录成功",
                  type: "success"
                });
                sessionStorage.setItem('sjwhChoseName',0)
                localStorage.setItem('currentLight',0)
                roles.forEach(item => {
                  if (
                    item.indexOf("数据维护管理员") !== -1 ||
                    item.indexOf("单屏管理员") !== -1 ||
                    item.indexOf("大屏管理员") !== -1
                  ) {
                    _this.$router.push("/index");
                    temp = '';
                  } else {
                    if (item.indexOf("安全保密员") !== -1) {
                      temp = 1;
                    }
                    if (item.indexOf("系统管理员") !== -1) {
                      temp = 2;
                    }
                    if (item.indexOf("安全审计员") !== -1) {
                      temp = 3;
                    }
                    if (temp) {
                      // localStorage.setItem("token", res.data.user.token);

                      // this.$store.commit('setLoginType',temp)
                      localStorage.setItem("loginType", temp);
                      if (localStorage.getItem("loginType") == "1") {
                        this.$router.push("/userAdmin");
                      } else if (localStorage.getItem("loginType") == "2") {
                        this.$router.push("/rfsysXtcspz");
                      } else if (localStorage.getItem("loginType") == "3") {
                        this.$router.push("/xtglysj");
                      } else {
                        this.$router.push("/home");
                      }
                    }
                  }
                });

                return false;
              } else if (res.data.result.resultCode == "99007") {
                _this.$message({
                  message: "该用户权限未被启用",
                  type: "warning"
                });
              } else if (res.data.result.resultCode == "99006") {
                _this.$message({
                  message: "账户或密码错误",
                  type: "warning"
                });
              }else if(res.data.result.resultCode == "99011") {
                _this.$message({
                  message: "账户不存在",
                  type: "warning"
                });
              };
            },900)
          })
          .catch(err => {
            _this.$store.state.loadingFlag=false
            _this.$message({
              message: "服务器连接失败",
              type: "error"
            });
          });
      } else {
        _this.$message({
          message: "账户或密码不能为空",
          type: "warning"
        });
      }
      if (this.checked) {
        this.setCookie(this.UserName, this.password, 7);
      } else {
        this.clearCookie();
      }
    }
  }
};
</script>
<style lang="less">
#app {
  width: 100%;
  height: 100%;
  .login {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../assets/image/底图.png") no-repeat;
    background-size: 100%;
    display: block;
    .login_img {
      .img1 {
        float: left;
        margin: 50px 50px;
      }
      .img2 {
        float: right;
        margin: 76px 30px;
      }
    }
  }
  .login_center {
    width: 1078px;
    height: 544px;
    margin-top: -272px;
    top: 50%;
    position: absolute;
    z-index: 100;
    left: 50%;
    margin-left: -539px;
    background: url("../assets/image/登录底板.png") no-repeat;
    .login_center_right {
      width: 400px;
      float: left;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      .el-select {
        width: 262px;
        margin: 0 34px;
      }
      .el-input__inner {
        border-radius: 18px;
        margin-top: 20px;
        height: 42px;
        border: 1px solid rgba(89, 137, 170, 0.6);
        background: rgba(28, 40, 58, 0.6);
        display: block;
        width: 262px;
        color: #cccccc;
        font-size: 16px;
        font-family: MicrosoftYaHei;
        padding-left: 10px;
      }
      .password,
      .username {
        border-radius: 18px;
        height: 36px;
        margin-left: 70px;
        /*border: 1px solid rgba(89, 137, 170, 0.6);*/
        background: rgba(28, 40, 58, 0.6);
        display: block;
        width: 250px;
        // margin: 20px 34px;
        color: #cccccc;
        font-size: 16px;
        font-family: MicrosoftYaHei;
        /*padding-left: 10px;*/
      }
      .login_center_right_pass {
        padding: 0 40px;
        position: relative;
        line-height: 30px;
        margin-top: 15px;
        span {
          &:nth-of-type(2) {
            line-height: 30px;
          }
        }
        .unforgetNumber {
          left: 40px;
          .el-checkbox__label {
            color: #fff;
          }
        }
      }
      .login_center_right_bottom {
        background: url("../assets/image/登录_nor.png") no-repeat;
        text-align: center;
        margin-top: 12px;
        height: 36px;
        line-height: 36px;
        color: #ffffff;
        font-size: 18px;
        font-family: MicrosoftYaHei;
        background-position: center;
        cursor: pointer;
        &:active {
          color: #ccc;
        }
      }
    }
  }
}
</style>
